<template>
  <div>
    <div>
      <van-nav-bar
        title="周报"
        right-text="添加周报"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <!-- <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="请输入搜索关键词"
        @input="onSearch"
      /> -->


    <div v-if="data_num>0">
      <van-cell-group inse v-for="(item,index) in data" :key="index">
      <van-cell style="align-items: center" @click="show_content(index)">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div style="display: flex">
            <img style="width: 76px;height:76px; borderRadius: 20%" src="../1.png" alt="" />
            <div style="marginLeft: 10px">
              <div>班级：{{item.zp_class}}</div>
              <div style="margintop: 10px">名字：{{item.zp_people}}</div>
             <span class="custom-title">日期：{{item.zp_time}}</span>
               <!-- <van-cell title="班级" value="2011-H5班" /> -->
            </div>
          </div>
        </template>
      </van-cell>
     
    </van-cell-group>
          
    </div>
    <div v-else>
      <div class="un_content">
              快快完成周报吧
      </div>
    </div>
   
    <!-- 添加周报按钮 -->
    <div></div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      value: "",
      data_num:this.data_num,
      data:this.data
    };
  },
  mounted(){
      this.userId = localStorage.getItem("userId");
      this.axios({
        url:"http://localhost:3000/weekly_inquiry",
        method:'post',
        data:{
            userID:this.userId
        }
      }).then((res)=>{
        // console.log(res.data.length)
        this.data=res.data
        this.data_num=res.data.length
      })
  },
  methods: {
    onSearch(val) {
      console.log(val);
    },
     onClickLeft() {
       this.$router.go(-1)
      Toast('返回');
    },
    onClickRight() {
      // Toast('按钮');
      this.$router.push("/weekly_content")
    },
    show_content(cc){
        // console.log(cc)
        this.$router.push({path:'/show_weekly',query:{index:cc}})
    }
  },
};
</script>

<style scoped>
.custom-title {
  /* font-size: 18px; */
  margin-top: 30px;
}
.box1 {
  height: 100vh;
  background-color: #eee;
}
/deep/.van-icon{
  color: black;
}
/deep/.van-nav-bar__text{
  color: black;
}
.un_content{
  margin-top: 100px;
  text-align: center;
  /* color: aliceblue; */
}
</style>